<template>
    <div class="component">
        <div class="jyTj" style="padding-bottom: 10px solid #ccc">
            <div class="topTit">
                <div class="topLeft">
                    <img src="@/assets/shareData/titleSwitch.png" />
                    商户月均交易量统计
                </div>
            </div>
            <div class="averageTj" id="averageTj"></div>
            <div class="detailInfo">
                <div style="jyNum">
                    总商户数:
                    <span style="color: #000">{{ jylAllinfo.custNumber }}</span>
                </div>
            </div>
        </div>
        <div class="jyTj" style="margin-top: 30px">
            <div class="topTit">
                <div class="topLeft">
                    <img src="@/assets/shareData/titleSwitch.png" />
                    商户数据
                </div>
                <div class="topRight"></div>
            </div>
        </div>
        <div class="dataList">
            <div class="dataItem" @click="goDeatil(50000, '')">
                <div class="left" style="background: #66d6ff"></div>
                <div class="right">
                    <div>
                        <div class="title">忠诚商户</div>
                        <div class="fanwei">{{ '月均交易量≥5万' }}</div>
                    </div>
                    <div style="color: #66d6ff">{{ jylAllinfo.faithful }}</div>
                </div>
            </div>
            <div class="dataItem" @click="goDeatil(30000, 50000)">
                <div class="left" style="background: #f6d73b"></div>
                <div class="right">
                    <div>
                        <div class="title">优质商户</div>
                        <div class="fanwei">{{ '3万≤月均交易量<5万' }}</div>
                    </div>
                    <div style="color: #f6d73b">{{ jylAllinfo.superior }}</div>
                </div>
            </div>
            <div class="dataItem" @click="goDeatil(20000, 30000)">
                <div class="left" style="background: #31b74c"></div>
                <div class="right">
                    <div>
                        <div class="title">潜力商户</div>
                        <div class="fanwei">{{ '2万≤月均交易量<3万' }}</div>
                    </div>
                    <div style="color: #31b74c">{{ jylAllinfo.potential }}</div>
                </div>
            </div>
            <div class="dataItem" @click="goDeatil(10000, 20000)">
                <div class="left" style="background: #ff6d6d"></div>
                <div class="right">
                    <div>
                        <div class="title">一般商户</div>
                        <div class="fanwei">{{ '1万≤月均交易量<2万' }}</div>
                    </div>
                    <div style="color: #ff6d6d">{{ jylAllinfo.general }}</div>
                </div>
            </div>
            <div class="dataItem" @click="goDeatil(5000, 10000)">
                <div class="left" style="background: #ffab61"></div>
                <div class="right">
                    <div>
                        <div class="title">低活跃商户</div>
                        <div class="fanwei">{{ '5000≤月均交易量<1万' }}</div>
                    </div>
                    <div style="color: #ffab61">{{ jylAllinfo.lowActiv }}</div>
                </div>
            </div>
            <div class="dataItem" @click="goDeatil(0, 5000)">
                <div class="left" style="background: #73c0de"></div>
                <div class="right">
                    <div>
                        <div class="title">不活跃商户</div>
                        <div class="fanwei">{{ '月均交易量<5000' }}</div>
                    </div>
                    <div style="color: #73c0de">{{ jylAllinfo.mostLowActiv }}</div>
                </div>
            </div>
            <div class="dataItem" @click="goDeatil(0, 0)">
                <div class="left" style="background: red"></div>
                <div class="right">
                    <div>
                        <div class="title">30天无交易</div>
                        <div class="fanwei">{{ '月均交易量=0' }}</div>
                    </div>
                    <div style="color: red">{{ jylAllinfo.noTrade }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { agentTransFirstPage, CustMonthAvgTrade } from '@/api/shareData.ts'
let props = defineProps({
    active: {
        type: String,
        default: 0
    }
})
const router = useRouter()
const jylData = ref([])
const jylAllinfo = ref([])
const activityBtn = ref(1)
// 时间戳格式化
const formatTime = time => {
    let date = new Date(time)

    let year = date.getFullYear()

    let month = date.getMonth() + 1

    let day = date.getDate()

    return year + '-' + month.toString().padStart(2, '0') + '-' + day.toString().padStart(2, '0')
}
// 交易量统计图表
const createDealTb = () => {
    var chartDom = document.getElementById('averageTj')
    var myChart = echarts.init(chartDom)
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)',
            position: ['0%', '-7%']
        },
        title: {
            text: '商户占比',
            left: 'center',
            top: '45%',
            textStyle: {
                color: '#000',
                fontSize: 12,
                align: 'center'
            }
        },
        color: ['#ff6d6d', '#f6d73b', '#73c0de', '#31b74c', '#ffab61', '#66d6ff', 'red'],
        series: [
            {
                name: '商户占比',
                type: 'pie',
                radius: ['40%', '60%'],
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                data: jylData.value,
                // width: 325,
                label: {
                    position: 'outside',
                    show: true,
                    formatter(params) {
                        if (params.name !== '') {
                            return `${params.name}` + `\n${params.percent === undefined ? 0 : params.percent}%`
                        }
                        return ''
                        // correct the percentage
                        // return param.name + ' \n(' + param.percent + '%)'
                    }
                },
                labelLine: {
                    normal: {
                        smooth: 0.2,
                        length: 150 / 20,
                        length2: 150 / 20
                    }
                }
            }
        ]
    }
    option && myChart.setOption(option)
}
const goDeatil = (min, max) => {
    console.log(props.active, ' props.active')
    router.push({
        path: `/sharemerchantData`,
        query: {
            tag: props.active,
            minAmount: min,
            maxAmount: max
        }
    })
}
// 交易趋势图表
const createJyqs = (data1, data2) => {
    var chartDom = document.getElementById('syTrend')
    var myChart = echarts.init(chartDom)
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data1
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                itemStyle: {
                    // 设置线条上点的颜色（和图例的颜色）
                    normal: {
                        color: '#de4133'
                    }
                },
                data: data2,
                type: 'line',
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            // 渐变颜色
                            {
                                offset: 0,
                                color: '#fee2df'
                            },
                            {
                                offset: 1,
                                color: '#fff'
                            }
                        ],
                        global: false
                    }
                }
            }
        ]
    }
    option && myChart.setOption(option)
}
// 获取交易量数据
const getJyl = val => {
    CustMonthAvgTrade({
        tag: val
    }).then(res => {
        jylAllinfo.value = res.object
        const dataArr = []
        for (let key in res.object) {
            if (key == 'faithful') {
                dataArr.push({ value: res.object[key], name: '忠诚商户' })
            } else if (key == 'superior') {
                dataArr.push({ value: res.object[key], name: '优质商户' })
            } else if (key == 'potential') {
                dataArr.push({ value: res.object[key], name: '潜力商户' })
            } else if (key == 'general') {
                dataArr.push({ value: res.object[key], name: '一般商户' })
            } else if (key == 'lowActiv') {
                dataArr.push({ value: res.object[key], name: '低活跃商户' })
            } else if (key == 'mostLowActiv') {
                dataArr.push({ value: res.object[key], name: '不活跃商户' })
            } else if (key == 'noTrade') {
                dataArr.push({ value: res.object[key], name: '30天无交易商户' })
            }
        }
        jylData.value = dataArr
        console.log(jylData.value, 'jylData.value111111111111111111111111111')
        createDealTb()
    })
}

// 监听传入时间变化
watch(
    () => props.date,
    (newValue, oldValue) => {
        getJyl(props.active)
    }
)
watch(
    () => props.active,
    (newValue, oldValue) => {
        getJyl(newValue)
    },
    {
        immediate: true,
        deep: true
    }
)
onMounted(() => {})
</script>
<style scoped lang="scss">
.jyTj {
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 30px;
}
.topTit {
    display: flex;
    align-items: center;
    .topLeft {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-family: SimHei;
        font-weight: 400;
        color: #4d4d4d;
        img {
            width: 22px;
            height: 15px;
            margin-right: 5px;
        }
    }
}
.dateBtn {
    display: flex;
    margin-top: 20px;
    .btnItem {
        text-align: center;
        line-height: 29px;
        width: 74px;
        height: 29px;
        border: 1px solid #cbcbcb;
        opacity: 1;
        border-radius: 4px;
        margin-right: 8px;
        font-size: 14px;
        font-family: SimHei;
        font-weight: 400;
        color: #b1b1b1;
    }
    .onActivity {
        border: 1px solid #66d6ff;
        opacity: 1;
        border-radius: 4px;
        color: #66d6ff;
        background: #fff;
    }
}
.dataPicker {
    .choseDate {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 29px;
        border: 1px solid #cbcbcb;
        opacity: 1;
        border-radius: 4px;
        margin-top: 20px;
    }
    .selectImg {
        width: 16px;
        height: 16px;
    }
}
#averageTj {
    width: 100%;
    height: 251px;
    margin-top: 30px;
}
#syTrend {
    width: 100%;
    height: 400px;
    margin-top: 30px;
}
.detailInfo {
    font-size: 14px;
    color: #a7a7a7;
    margin-top: 20px;
    .jybs {
        margin-top: 10px;
    }
}
.dataList {
    .dataItem {
        display: flex;
        // align-content: center;
        background: #f8f8f8;
        border-radius: 8px;
        padding: 7px 10px;
        margin-top: 20px;
        .left {
            width: 11px;
            height: 11px;
            background: #66d6ff;
            opacity: 1;

            margin-right: 10px;
        }
        .right {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
                margin-bottom: 10px;
            }
            .fanwei {
                color: #a5a5a5;
            }
        }
    }
}
</style>
